[Mã code 58883]

Full Source Code Đồ án bán đồ thời trang ReacJs, NodeJs, MySQL

  (1 Đánh giá)
  1       85    

Full Source Code Đồ án bán đồ thời trang ReacJs, NodeJs, MySQL Hệ thống bán hàng thời trang hoàn chỉnh: quản lý sản phẩm, giỏ hàng, thanh toán, user/admin, responsive và bảo mật.

Danh mục
Thể loại
Ngày đăng
04-9-2025
Loại file
Full code
File download
 .rar [ MB]
CAM KẾT TỪ NGƯỜI BÁN
Chức năng đầy đủ cơ bản cam kết hỗ trợ cài đặt

(Hạng vàng)
Xem trang

Source code
1

Đánh giá (2)
5/5

Ngày tham gia
4/9/2025

 Frontend cho website thương mại điện tử thời trang (banner “IVY MODA SALE…”), gồm duyệt sản phẩm, chi tiết sản phẩm, giỏ hàng, đặt hàng, quản lý tài khoản/đơn hàng.

  • Tech stack:
  • React 19React Router 7 (SPA, nested routes)
  • Vite 7 (dev/build), SassBootstrap 5 + bootstrap-icons
  • ESLint 9
  •  API/Server Node.js cho e-commerce mini (sản phẩm, danh mục, biến thể size/color, giỏ hàng, đơn hàng) kèm UI EJS để quản trị.

Stack: Express, MySQL (mysql2/promise, pool), EJS view engine, Multer (upload ảnh), JWT auth, Redis cache (tùy chọn).

Kiến trúc: Controller → Service → Repository (Clean-ish layers). Middleware cho auth, upload, 404, error. Cache theo key/TTL.

  • Proxy backendvite.config.js chuyển tiếp '/api' và '/uploads' tới http://localhost:3000 (tránh CORS, dùng URL tương đối).

    Tính năng chính

    Trang tính năng chính

    pages/Home.jsx:

    Hiển thị Slider, danh sách “Sản phẩm mới” qua components/list-product.

    pages/product-detail.jsx:

    Tải chi tiết sản phẩm và biến thể.

    Nạp danh mục màu/size từ API; nếu lỗi, fallback vào dữ liệu sản phẩm.

    Suy luận variantId theo màu/size, kiểm soát số lượng theo tồn kho, thêm giỏ hàng (addToCart), hiển thị giá gốc/giảm.

    pages/cart.jsx:

    Tải giỏ hàng nếu đã đăng nhập; nếu chưa, hiển thị trống.

    Lấy chi tiết sản phẩm theo product_id để hiện tên/ảnh.

    Cập nhật số lượng với debounce, UI lạc quan; xóa item.

    Tính tổng; kiểm tra hợp lệ theo tồn kho; đặt hàng qua createOrder rồi điều hướng tới /user/orders.

    pages/orders.jsx:

    Liệt kê đơn của tôi, chuẩn hóa các field phổ biến (id, createdAt, status, total).

    pages/order-detail.jsx:

    Tải đơn hàng, map danh sách items + ảnh/tên sản phẩm (fetch thêm nếu thiếu), hiển thị địa chỉ giao hàng và tổng tiền; có thêm fetch getUserById để hiển thị địa chỉ tài khoản mặc định nếu có.

    pages/addresses.jsx:

    Lấy profile từ useOutletContext() của user-layout, render danh sách địa chỉ đã chuẩn hóa.

    pages/user-layout.jsxpages/user-profile.jsxcomponents/UserSidebar.jsx: bố cục và thông tin người dùng (đã có khung).

    CSDL và khởi tạo (tự tạo bảng)

    Được tạo trong config/db.js khi khởi động:

    users (customer/admin)

    categories

    products

    sizescolors (danh mục chuẩn)

    product_variants (size/color/stock/price theo sản phẩm, unique theo product-size-color)

    cartscart_items (1 cart active/user)

    ordersorder_items (order từ cart, giảm stock variant)

     

    Ràng buộc FK phù hợp, có transaction cho thay đổi nhạy cảm.


XEM THÊM ==> Hướng dẫn cài đặt chi tiết

HÌNH ẢNH DEMO


code web,Full code web admin,web Thời Trang Online,web thời trrang

code web,Full code web admin,web Thời Trang Online,web thời trrang

code web,Full code web admin,web Thời Trang Online,web thời trrang

code web,Full code web admin,web Thời Trang Online,web thời trrang

code web,Full code web admin,web Thời Trang Online,web thời trrang

code web,Full code web admin,web Thời Trang Online,web thời trrang

code web,Full code web admin,web Thời Trang Online,web thời trrang


HƯỚNG DẪN CÀI ĐẶT

Backend

Chạy dự án

Cài đặtnpm install

Chạynpm run dev (mặc định PORT 3000)

ENV chính:

DB: DB_HOSTDB_PORTDB_USERDB_PASSWORDDB_NAMEDB_POOL_LIMIT

JWTJWT_SECRETJWT_EXPIRES_IN

Redis (tùy chọn): REDIS_URL hoặc REDIS_HOSTREDIS_PORTREDIS_PASSWORD

 

Cache TTL (tùy chọn): CACHE_TTL_* theo nhóm products/categories/sizes/colors/orders

Frontend

Scripts:

npm run dev: chạy Vite (proxy tới backend http://localhost:3000 cho '/api' và '/uploads').

npm run build: build production.

npm run preview: xem trước build.

npm run lint: ESLint.

Yêu cầu backend RESTful phục vụ dưới prefix '/api/v1/*' tương thích các endpoint đã liệt kê.
 




Nguồn: Topcode.vn

BÌNH LUẬN (0)


ĐÁNH GIÁ (1)

ĐIỂM TRUNG BÌNH

5
1 Đánh giá
Code rất tốt (1)
Code tốt (0)
Code rất hay (0)
Code hay (0)
Bình thường (0)
Thành viên
Nội dung đánh giá
22:08 - 4/9/2025
Code rất tốt
Code rất tốt và phù hợp để phát triển
HỖ TRỢ TRỰC TUYẾN